<template>
<div>

	<div class="bbg1">
		<div class="title2">
			<div class="shuxian2"></div>
			<div class="wenzi2">
				网格人员管理
			</div>
		</div>
	</div>

	<el-container class="bbg1 pl45">
		<el-aside style="width:225px;height:881px;background:rgba(7,65,78,1);">
			<el-tree :data="treedata" 
			:expand-on-click-node="false"
			class="tree"
			node-key="id"
			:props="props1"
			v-if="showTree"
			:indent="20"
			:default-expanded-keys="defaultExpandedKeys"
			style="background:rgba(7,65,78,1);"
			@node-click="showUser"
			>
				<span class="custom-tree-node" slot-scope="{ node, data }">
			        <span>{{ node.label }}</span>
			        <span>
			        	
			        </span>
		        </span>

			</el-tree>

		</el-aside>



		<el-main style="padding:0px;">

			<div class="t1">
				{{title}}
			</div>
			

			<div class="t2">
				<el-tabs v-model="activeName2" type="card" v-if="show" class="mt10" >
					<el-tab-pane label="网格信息" name="first">
						<gride :obj="currentGride"></gride>
					</el-tab-pane>
					<el-tab-pane label="人员信息" name="second">
						<user :obj="currentGride"></user>
					</el-tab-pane>
					<el-tab-pane label="企业信息" name="third">
						<unloading :obj="currentGride" :gridarr="treedata"></unloading>
					</el-tab-pane>
					<el-tab-pane label="执行部门信息" name="fourth">
						<member :obj="currentGride"></member>
					</el-tab-pane>
				</el-tabs>
			</div>

		</el-main>

	</el-container>

<!-- <el-card class="box-card" >
	<div slot="header" class="clearfix">
		<span>网格人员管理1111</span>
	</div>
<el-container :style="{width : offsetwidth + 'px', height : offsetheight + 'px'}">
	<el-aside width="300px">
		<div class="custom-tree-node">
			<span>一级：{{top.name}}</span>
			<span>
				<el-button
			        type="text"
			        size="mini"
			        @click="showUser(top)">
			        查看用户
			    </el-button>
	        </span>
		</div>
		<el-tree :data="treedata" 
		:expand-on-click-node="false"
		:default-expand-all="true"
		class="tree"
		node-key="id"
		:props="props1"
		v-if="showTree"
		:indent="20"
		:style="{height : offsetheight + 'px'}"
		@node-click="showUser"
		>
			<span class="custom-tree-node" slot-scope="{ node, data }">
		        <span>{{ node.label }}</span>
		        <span>
		        	
		        </span>
	        </span>

		</el-tree>
	</el-aside>
	<el-main style="padding-top:0px;">

		{{title}}

		<el-tabs v-model="activeName2" type="card" v-if="show" class="mt10" >
			<el-tab-pane label="网格信息" name="first">
				<gride :obj="currentGride"></gride>
			</el-tab-pane>
			<el-tab-pane label="人员信息" name="second">
				<user :obj="currentGride"></user>
			</el-tab-pane>
			<el-tab-pane label="企业信息" name="third">
				<unloading :obj="currentGride" :gridarr="treedata"></unloading>
			</el-tab-pane>
			<el-tab-pane label="执行部门信息" name="fourth">
				<member :obj="currentGride"></member>
			</el-tab-pane>
		</el-tabs>

	</el-main>
</el-container>
</el-card> -->

<el-dialog title="添加用户" width="70%" :visible.sync="userDialogFormVisible">
  	<el-form ref="device"
		label-width="180px"	
		>

		
		<el-form-item label="账号:" >
			<el-input v-model="userForm.login_name"></el-input>
		</el-form-item>
		<el-form-item label="密码:" >
			<el-input v-model="userForm.password"></el-input>
		</el-form-item>
		<el-form-item label="姓名:" >
			<el-input v-model="userForm.name"></el-input>
		</el-form-item>
		<el-form-item label="电话:" >
			<el-input v-model="userForm.mobile"></el-input>
		</el-form-item>

		<el-form-item label="角色:" >
			<el-checkbox 
			v-for="(item, index) in roleList" 
			v-model="checked5" :key="index" :label="item.role_id" border size="medium">
			{{item.role_name}}
			</el-checkbox>
		</el-form-item>

	</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="userDialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="createUser">确 定</el-button>
  </div>
</el-dialog>

</div>
</template>

<script>

import { mapGetters } from 'vuex'

import gride from './components/gride_1'
import member from './components/member_1'
import unloading from './components/unloading_1'
import user from './components/user_1'

import position from '@/components/position/index'

export default {
	
	name : 'userList',
	
	data () {
		return {
		  	offsetheight : document.documentElement.clientHeight - 60 - 20 - 20,    //
			offsetwidth : document.documentElement.clientWidth - 200 - 50,


			treedata : [],
			showTree : false,

			top : {},


			props1 : {
				label : 'name',
			},


			form : {},

			userList : {},

			pageNo : 1,
			pageSize : 10,

			userDialogFormVisible : false,

			userForm : {},

			reason : '',

			currentGride : {},

			roleList : [],

			checked5 : [],

			activeName2 : 'first',


			subGrideList : {},
			subUserList : {},
			subUnloadingList : {},
			subMemberList : {},

			show : false,

			title : '',


			defaultExpandedKeys : [],

		}
	},

	props : {

	},

	components : {
		gride,
		member,
		unloading,
		user,
		position,
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		init () {
			this.defaultExpandedKeys = [];
			this.$http({
				fun : 'grideList',
				cb : res => {

					res.forEach(item => {
						if(item.type == '1'){
							this.defaultExpandedKeys.push(item.id);
						}
					})


					const result = this.$util.transData(res, 'id', 'parent_id', 'children');
					console.log(result);
					//this.top = result[0];
					//this.treedata = result[0].children;
					this.treedata = result;
					this.showTree = true;

					this.showUser(this.treedata[0]);
				}
			});


			// this.$http({
			// 	fun : 'roleList',
			// 	cb : res => {
			// 		console.log('rolelist');
			// 		console.log(res);
			// 		this.roleList = res;
			// 	}
			// });

		},

		showUser (item) {
			console.log(item);

			console.log('getPidGridName');

			if(item.id == '1'){
				this.title = '所有网格';
			}else{
				this.$http({
					fun : 'getPidGridName',
					id : item.id,
					cb : res => {
						console.log('res');
						console.log(res);
						this.title = res;
					}
				});
			}

			this.show = false;
			this.currentGride = item;
			this.$nextTick(() => {
				this.show = true;
			});
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},


		onSubmit () {


		},

		addUser () {
			this.userDialogFormVisible = true;
		},

		createUser () {
			console.log('createUser');
			this.$http({
				fun : 'createUser',
				grid_id : this.currentGride.id,
				login_name : this.userForm.login_name,
				password : this.userForm.password,
				mobile : this.userForm.mobile,
				name : this.userForm.name,
				rolelist : this.checked5.join(','),
				cb : res => {
					console.log(res);
					this.showUser(this.currentGride);
				}
			});
		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}


.t1 {
	padding: 18px;
	/*width:1530px;*/
	height:25px;
	border:1px solid rgba(22,144,152,1);
	margin-left: 20px;
	color: #fff;
}

.t2 {
	/*padding: 18px;*/
	/*width:1565px;*/
	margin: 20px 0 20px 20px;
}


</style>
